<template>
    <el-dialog :class="['dialog', autoHeight ? 'h70' : '']" :visible.sync="show" v-bind="$attrs" v-on="$listeners">
        <template v-if="$slots.title">
            <slot name="title"></slot>
        </template>
        <slot></slot>
        <div v-if="$slots.footer" slot="footer">
            <slot name="footer"></slot>
        </div>
        <div v-else-if="showFooter" slot="footer" :class="['dialog-footer', footerCenter ? 'footer-center' : '']">
            <el-button v-if="parentConfirm" type="primary" @click="confirm">{{ footerTxt }}</el-button>
            <el-button v-else-if="!detail && ruleForm.uuid != undefined" type="primary" @click="handleConfirm('update','put')">
              修改</el-button>
            <el-button v-else-if="!detail" type="primary" @click="handleConfirm('create','post')">
            添加</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
        <div v-else slot="footer" :class="['dialog-footer', footerCenter ? 'footer-center' : '']">
            <el-button @click="cancel">关 闭</el-button>
        </div>
    </el-dialog>
  </template>
  
  <script>
  import axios from "@/utils/axios.js";
  import Vue from 'vue'
  export default {
    name: 'Dialog',
    props: {
      ruleForm: {
        type: Object,
        default: () => ({})
      },
      visible: {
        type: Boolean,
        default: false
      },
      footerTxt: {
        type: String,
        default: '确 定'
      },
      footerCenter: {
        type: Boolean,
        default: false
      },
      showFooter: {
        type: Boolean,
        default: true
      },
      isParentShow: {
        type: Boolean,
        default: false
      },
      detail: {
        type: Boolean,
        default: false
      },
      parentConfirm:{
        type:Boolean,
        default:false
      },
      autoHeight: {
        type: Boolean,
        default: false
      },
    },
    computed: {
      show: {
        set(val) {
          this.$emit('update:visible', val)
        },
        get() {
          return this.visible
        }
      }
    },
    data() {
      return {
        pageScope: null,
        maxSize: false,
        controller:'',
        func:'',
      }
    },
    methods: {
        confirm() {
            this.$emit('confirm', this.pageScope, this)
            if (!this.isParentShow) {
                this.show = false
            }
        },
        cancel() {
            this.$emit('cancel')
            this.show = false
        },
        // 添加修改
        handleConfirm(type,method) {
            var func  =  this.func || type,
            api = this.module + "/admin/v1/" + this.controller + '/' + func,
            data = {...this.ruleForm};
            this.load = this.loading();
            axios[method](api, data ).then((res) => {
                data = {...data,...res.data};
                this.$emit('confirm', data );
            }).catch(res=>{
                res.message && this.$message.error(res.message);
            }).finally(() => {
                this.load.close()
                this.show = false
            });
        },
    },
    mounted() {
        var listUrl = this.$route.path.split("/").filter((item) => {
            return item != "modules" && item != "";
        });
        
        this.module = listUrl[0];
        //安全培训需要修改
        if(listUrl && listUrl[0]=='corpSafetytrain'){
            this.module = 'safetytrain';
            this.controller = listUrl[1]
        }else if(listUrl[0]=='platform'){
            this.module = 'platform';
            this.controller = listUrl[1]
        }else{
            this.module = listUrl[0];
            if(listUrl.length==2){
                this.controller = listUrl[1]
            }else if(listUrl.length>2){
                if(this.module=='video'){
                    this.controller = listUrl[1]
                }else{
                    this.controller = listUrl[2]
                }
            }
        }
    },
    watch: {
      visible: function (newVal, oldVal) {
        console.log(newVal, oldVal)
        if (newVal === oldVal) return
        if (newVal && this.autoHeight) {
            this.$nextTick(() => {
                let dialogHeight = document.getElementsByClassName('el-dialog')[0].clientHeight
                let bodyHeight = document.getElementsByClassName('el-dialog__body')[0].clientHeight
                let safeHeight = this.showFooter ? 120 : 30
                if (bodyHeight > dialogHeight - safeHeight) {
                    document.getElementsByClassName('el-dialog')[0].style.height = dialogHeight+'px'
                }
            })
        }
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  ::v-deep.dialog {
    .el-dialog {
      margin: 0 !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10px;
    }
  
    .el-dialog__body {
      max-height: calc(100% - 120px);
      overflow: auto;
    }
  }
  
  .footer-center {
    text-align: center;
  }
  .h70{
    ::v-deep .el-dialog {
        max-height: 70%;
    }
  }
  </style>
  